<template>
  <Card>
    <div class="md:flex md:mb-5">
      <div class="text-3xl font-semibold" style="color: #4e598c">活跃用户数（汇总）</div>
    </div>
    <div class="md:flex">
      <StepAndTimePicker class="w-full enter-x" ref="pickerRef" :initData="initStepAndTimeRange" @success="handleSuccess"></StepAndTimePicker>
    </div>
    <div class="md:flex">
      <div :id="lineChartName" style="width: 800%; height: 450%"></div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { Card } from 'ant-design-vue';
import { onMounted, ref } from 'vue';
import moment from 'moment';
import * as echarts from 'echarts';
import StepAndTimePicker from '/@/views/operation-center/components/StepAndTimePicker.vue';
import { getActiveUsersInTotal } from '/@/api/operation-center/tenant-opertation/user-activity-analysis/userActivityAnalysis';
import {
  ActiveUserByTimeMap,
  ActiveUsersReq,
} from '/@/api/operation-center/tenant-opertation/user-activity-analysis/model/userActivityAnalysisModel';

var option;

const initStepAndTimeRange = ref();

let startDate = moment().add(-9, 'months').format('YYYY-MM-DD HH:mm:ss');

let stepTimeRange = {
  stepType: 0,
  startTime: startDate,
  endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
};

let lineChartName = 'active-users-total-line-chart';

function collectActiveUserNumList(activeUsersByTenantDtoList: ActiveUserByTimeMap[], activeDateList: Array<any>, activeValueList: Array<any>) {
  for (let i = 0; i < activeUsersByTenantDtoList.length; i++) {
    let activeUsersByTenantDto = activeUsersByTenantDtoList[i];
    activeDateList.push(activeUsersByTenantDto.dayTime);
    activeValueList.push(activeUsersByTenantDto.activeUserNum);
  }
}

const handleSuccess = (params) => {
  let lineChartDom = document.getElementById(lineChartName);

  let myChart = echarts.init(lineChartDom);
  let activeUserTotalReq: ActiveUsersReq = {
    stepType: params.stepType,
    startTime: params.startTime,
    endTime: params.endTime,
  };

  let activeDateList = [];
  let activeValueList = [];

  getActiveUsersInTotal(activeUserTotalReq).then((res) => {
    collectActiveUserNumList(res, activeDateList, activeValueList);

    option = {
      title: {
        text: '活跃用户数',
      },
      xAxis: {
        type: 'category',
        data: activeDateList,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: activeValueList,
          type: 'line',
        },
      ],
    };

    option && myChart.setOption(option);
  });
};

onMounted(() => {
  initStepAndTimeRange.value = {
    stepType: 0,
    startTime: moment(stepTimeRange.startTime, 'YYYY-MM'),
    endTime: moment(stepTimeRange.endTime, 'YYYY-MM'),
  };
});
</script>
